<template>
  <div class="contaiiner">
    
    <div class="header">
      <van-icon name="wap-home-o" size="30"  @click="gohome" />
      <div class="text">网易严选</div>
      <div class="iconft">
        <van-icon class="search"  name="search" size="30" @click="gosearch" />
        <van-icon name="cart-o" size="30" badge="5" @click="gocart"/>
      </div>
    </div>
    <div class="body">
      <div class="swiper">
          <van-swipe @change="onChange" :autoplay="3000" >
          <van-swipe-item v-for="(img, index) in imageList" :key="img.id"><img class="img" :src="img.imgUrl" alt=""></van-swipe-item>
         
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
      </div>
      <div class="deatilinner">
        <div class="detail">
          <div class="price">￥{{ skuInfo.price }}</div>
          <div class="detail_all">
            <div class="right">
              <div class="name">{{ skuInfo.skuName }}</div>
              <div class="shop">
                <div class="ziying">自营</div>
                <span class="wang">王的手创</span>
              </div>
              <div class="serson">推荐理由</div>
            </div>
            <div class="left">
              <div class="haha">
                <div class="core">100%</div>
                <div class="good">好评率</div>
              </div>
              <van-icon name="arrow" size="15" color="#dadada"/>
            </div>

          </div>
        </div>
        <div class="sizhong">
        <div class="up">
          <div class="serail">
            <div class="number">1</div>
            <div class="numbertext">{{ skuInfo.skuDesc }}</div>
          </div>
          <div class="serail">
            <div class="number">2</div>
            <div class="numbertext">手机</div>
          </div>
  
  
        </div>
        </div>
      </div>
      <div class="youfei">
        <div class="youfeiinner">
          <div class="maild">
          邮费：单价包邮
          </div>
        <van-icon name="arrow" size="15" />
        </div>
        <div class="youfeiinner2">
          <div class="promotion">
          促销：
          <div class="pricegou">全场加价购</div>
          <span class="super">超级换购</span>
          </div>
          
        <van-icon name="arrow" size="15" />
        </div>
        <div class="youfeiinner">
          <div class="maild">
          购物返：最高返<span class="jifen">8积分</span>
          </div>
        <van-icon name="arrow" size="15" />
        </div>
      
      </div>
      <div class="company">
        <div class="compangoods">商品参数</div>
        <div class="word">
          <div class="textur">材质</div>  
          <span>其它</span>
        </div>
      </div>
      <div class="bigImg" v-for="(img, index) in imageList" :key="img.id">
          <img class="earth"  :src="img.imgUrl" alt="">
      </div>
    
    
    </div>
    <div class="footer">
    <div class="m-btnGroup">
        <button class="btn_k">
          <van-icon name="service-o" size="30" />
        </button>
        <button class="btn_m">立即购买</button>
        <button class="btn_c" @click="addShopCart" >加入购物车</button>
    </div>

    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'GoodsDetail',
  data() {
    return {
      current: 0,
      skuId: 2,
      skuNum:1
    };
  },
  mounted(){
    this.getGoodsDetailInfo()
  },
  methods:{
    onChange(index) {
      this.current = index;
    },
    gohome(){
      this.$router.replace('/home')
    },
    gosearch(){
      this.$router.replace('/search')
    },
    gocart(){
      this.$router.replace('/shopcart')
    },

    getGoodsDetailInfo() {
      this.$store.dispatch("getGoodsDetailInfo", this.skuId);
    },

    async addShopCart(){

      try {
        const result = await this.$store.dispatch('addOrUpdateShopCart',{skuId:this.skuId,skuNum:this.skuNum})
        console.log(result)
        
        this.$toast.success('添加购物车成功');

        sessionStorage.setItem('skuInfo_key',JSON.stringify(this.skuInfo))
        
        this.$router.push('/shopcart')

      } catch (error) {
        this.$toast.fail('添加购物车失败');
      }
      

    }




  },

  computed: {
    ...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList"]),

    imageList(){
      return this.skuInfo.skuImageList || []
    }
  },
}
</script>

<style lang="less" scoped>
  .contaiiner{
    display: flex;
    flex-direction: column;
    height: 100vh;
    .header{
      width: 100%;
      height: 44px;
      position: relative;
      background-color: #fafafa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      box-sizing: border-box;
      .text{
        font-size: 20px;
        .iconft{
          .search{
            padding-left:50px;
          }
        }

      }

    }
    .body{
      flex: 1;
      width: 100%;
      background: #eeeeee;
      overflow-y: scroll;
      .swiper{
        .img{
          width: 375px;
          height: 375px;
        }
        .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background-color: white;
        margin-bottom: 15px;
        margin-right: 10px;
      }
      }
      .deatilinner{
        width: 100%;
        background-color: white;
        // padding: 15px;
        .detail{
        // padding: 10px;
        .price{
          font-size: 32px;
          color: #fa1e32;
          font-weight: 700;
          height: 40px;
          margin-bottom: 10px;
          margin-left: 15px;
        }
        .detail_all{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            box-sizing: border-box;

          .right{
            border: 1xp solid red;
          // margin-right: 70px;
            .name{
              font-size: 16px;
              color: #333333;
              font-weight: 700;

            }
            .shop{
              display: flex;
              align-items: center;
              margin-top: 10px;
              .ziying{
                width: 36px;
                height:16px;
                background-color: #fa5258;
                color: white;
                font-size: 12px;
                text-align: center;
                line-height:16px;
                border-radius: 20px;
              }
              .wang{
                font-size: 12px;
                color: #7f7f7f;
              }
            }
            .serson{
              font-size: 12px;
              color: #333333;
              margin-top: 10px;
              margin-bottom: 10px;
            }
            
        }
        .left{
          width: 89px;
          text-align: center;
          display: flex;
        
          .haha{
              .core{
                color: #dd1a21;
                font-weight: 700;
              }
              .good{
                font-size: 12px;
                color: #7f7f7f;
              }
          }
        }
      }
    }
        .sizhong{
          width: 345px;
          // height: 94px;
          background-color: #fafafa;
          border: 1px solid #ebebeb;
          margin: 0 auto;
          .up{
            padding: 10px;
            .serail{
            display: flex; 
            align-items: center;
            margin-bottom: 5px;
            .number{
            width: 12px;
            height: 12px;
            font-size:12px ;
            border: 1px solid #dd1a21;
            color: #dd1a21;
            border-radius: 50%;
            text-align: center;
            margin-right: 5px;
            }
          .numbertext{
            font-size: 12px;
            color: #333333;
          }
          }
        
          }
          

        }
      }
      .youfei{
        margin-top: 15px;
        background-color: white;
        padding-right: 10px;
        box-sizing: border-box;
        padding-left: 15px;
        .youfeiinner{
        width: 375px;
        height: 52px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #c1c1c1 ;
      
        }
        .youfeiinner2{
          width: 375px;
          height: 52px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #c1c1c1 ;
          .promotion{
            text-align: center;
            .pricegou{
              width: 70px;
              height: 15px;
              border: 1px solid #dd1a21;
              color: #dd1a21;
              font-size: 12px;
              border-radius: 20px;
              text-align: center;
              display: inline-block;
              line-height: 15px;
              margin: 0 5px;

            }
          }
      
        }
        .maild{
          color: #333333;
          .jifen{
            font-size: 16px;
            color: #dd1a21;
          }
        }
      
      }
      .company{
        display: flex;
        flex-direction: column;
        background-color: white;
        padding: 15px;
        margin-top: 15px;
          
        .compangoods{
          border-bottom:#000000 1px dashed;
          // margin: 5px;
            padding-bottom: 5px;
        }

        .word{
            font-size: 12px;
            .textur{
              display: inline-block;
              margin-right: 50px;
              color:#999 ;
            }
        }
      
      }
      .bigImg{
        .earth{
          vertical-align: top;
          width: 100%;
          height: auto;
        }
      }
    

    }
    .footer{
      width: 100%;
      height: 50px;
      .m-btnGroup {
            display: flex;
            width: 100%;
            height: 50px;
        .button {
            
          
            text-align: center;
            font-size: 14px;
            border: 1px solid #DD1A21;
            outline: 0;
            background-color: #fff;
        }
        .btn_k {
            width: 78px;
            height: 50px;
            border: none;
            border-top: 1px solid #ccc;
        }
        .btn_m {
            flex: 1;
            border: 1px solid #ccc;
            border-right:#ccc;
            color:#333;
        }
        .btn_c {
            flex: 1;
            background-color: #DD1A21;
            border: 1px solid #DD1A21;
            color: #fff;
        }
        }
    
      


    }




  }
</style>
